<template>
  <div>
    <div v-if="zhoubian.length > 0" class="zb-box">
      <div class="zb-box_l" @click="routerJump(0)">
        <h5 class="zb-title m0" :style="{color: zhoubian[0].title_color}">{{zhoubian[0].title}}</h5>
        <p class="zb-desc">{{zhoubian[0].subtitle}}</p>
        <div class="zb-box_l-img">
          <img-format :src="zhoubian[0].main_pic_hash" class="zb-img_1" />
        </div>
      </div>
      <div class="zb-box_r">
        <div class="flex-row-sb-center zb-r_item" style="border-bottom: 1px solid #ddd;" @click="routerJump(1)">
          <div>
            <h5 class="zb-title m0" :style="{color: zhoubian[1].title_color}">{{zhoubian[1].title}}</h5>
            <p class="zb-desc">{{zhoubian[1].subtitle}}</p>
          </div>
          <img-format :src="zhoubian[1].main_pic_hash" />
        </div>
        <div class="flex-row-sb-center zb-r_item" @click="routerJump(2)">
          <div>
            <h5 class="zb-title m0" :style="{color: zhoubian[2].title_color}">{{zhoubian[2].title}}</h5>
            <p class="zb-desc">{{zhoubian[2].subtitle}}</p>
          </div>
          <img-format :src="zhoubian[2].main_pic_hash" />
        </div>
      </div>
    </div>
    <div class="no-login">
      <h2 class="o-title"><span class="line right"></span><span class="iconfont icon-icon-"></span>限时好礼<span class="line left"></span></h2>
        <p class="sub-title">金币换豪礼</p>
        <div class="time-limit">
          <a class="time-limit-item" v-for="(item, i) in limitList" :key="i">
            <img class="img" :src="item.image_hash" width="100%">
            <span class="corner_marker">{{item.corner_marker}}</span>
            <p class="ellipsis p">{{item.title}}</p>
            <p class="p"><span class="span">{{item.points_required}}金币</span><del class="del">￥{{item.original_price}}</del></p>
          </a>
        </div>
         <p class="p" @click="$router.push('/goldcoinshop')">查看更多<span class="iconfont icon-jiantou-elm"></span></p>
      </div>
    </div>
</template>

<script>
import { limitData, getFindHeader } from '@/api/elm-data'
import ImgFormat from '_c/imgFormat/ImgFormat.vue'
export default {
  name: 'find',
  data() {
    return {
      limitList: [],
      zhoubian: []
    }
  },
  components: {
    ImgFormat
  },
  async created() {
    if(this.$store.state.token&&JSON.parse(sessionStorage.getItem('Geo'))) {
      const { latitude, longitude } = JSON.parse(sessionStorage.getItem('Geo'))
      try {
        const { data } = await getFindHeader({
          lat: latitude,
          lng: longitude
        })
        this.zhoubian = data[1]
        console.log(this.zhoubian)
      }catch(e) {
        this.$toast('定位失败无法获取更多')
      }
    }
    const { data } = await limitData()
    this.limitList = data.splice(0, 3)
  },
  methods: {
    routerJump(num) {
      if(!num) {
        this.$router.push('/goldcoin')
      }else if(num === 1) {
        this.$router.push('/activitedpage')
      }else if(num === 2) {
        return
      }
    }
  }
}
</script>

<style scoped lang="less">
  .no-login {
    padding-bottom: 10px;
    background-color: #fff;
    border-top: 1px solid transparent;
  }
  .o-title {
    text-align: center;
    color: #2f2f2f;
    font-size: 34px;
  }
  .line {
    display: inline-block;
    position: relative;
    height: 3px;
    width: 50px;
    margin: 0 20px;
    background-color: #000;
    vertical-align: super;
  }
  .right::after {
    content: '';
    height: 10px;
    width: 10px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    right: 0;
    margin-top: -4px;
  }
  .left::before{
    content: '';
    height: 10px;
    width: 10px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    left: 0;
    margin-top: -4px;
  }
  .icon-icon- {
    color: #F9355E;
    font-size: 32px;
  }
  .sub-title {
    margin: 0;
    margin-top: -26px;
    text-align: center;
    color: #818181;
    font-size: 24px;
  }
  .time-limit {
    margin-top: 40px;
    display: flex;
  }
  .time-limit-item {
    flex: 1;
    position: relative;
  }
  .corner_marker {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1px;
    background-color: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 26px;
  }
  .p {
    font-size: 26px;
    text-align: center;
    color: #565656;
  }
  .span {
    color: #F9355E;
    font-size: 22px;
  }
  .del {
    font-size: 18px;
    color: #565656;
  }
  .icon-jiantou-elm {
    font-size: 24px;
  }
  .zb-box {
    background-color: #fff;
    width: 100%;
    margin-bottom: 20px;
    display: flex;
  }
  .zb-box_l {
    flex: 1;
    padding: 40px;
    border-right: 1px solid #ddd;
  }
  .zb-title {
    font-size: 28px;
  }
  .zb-desc {
    margin: 10px 0;
    color: #666;
  }
  .zb-box_l-img {
    display: flex;
    flex-direction: row-reverse;
  }
  .zb-img_1 {
    width: 170px;
  }
  .zb-box_r {
    flex: 1;
  }
  .zb-r_item {
    padding: 40px;
  }
</style>
